<template>
  <main class="container">
    <div class="cl">
      <h2>玩家配比</h2>
      <hr>
      <ul>
        <li>
          <img src="../assets/img/killer.jpg" alt="killer">
        </li>
        <span>杀手{{getKillerNum}}人</span>
        <li>
          <img src="../assets/img/people.jpg" alt="people">
        </li>
        <span>平民{{getPeopleNum}}人</span>
      </ul>
      <div class="ct-input">
        <h4 class="input-title">请输入玩家数量：</h4>
        <VInput v-model="settingNum"></VInput>
        <h4 class="input-dp">玩家数量为4-18 </h4>
      </div>
      <button @click="goDeal" class="btn">去发牌</button>
    </div>
    <Warning :isShow="$store.state.isShow" :closeBox="closeBox" :waringMsg="waringMsg"></Warning>
  </main>
</template>

<script>
import VInput from './input'
import Warning from './warning'
import store from '@/assets/js/storehouse'
export default {
  store,
  name: 'Setting',
  data(){
    return {
      settingNum: 4,
      waringMsg: '玩家数量只能为4-18!'
    }
  },
  components: {
    "VInput": VInput,
    "Warning": Warning
  },
  computed: {
    getKillerNum(){
      let value = parseInt(this.settingNum / 3);
      return value;
    },
    getPeopleNum(){
      let value = this.settingNum - this.getKillerNum;
      return value;
    }
  },
  methods: {
    closeBox(){
      this.$store.commit('showClose')
    },
    goDeal(){
      this.$router.push('deal');
      console.log(arguments[0].path[0]);
    }
  },
  watch: {
    settingNum(){
      this.$store.state.settingNum = arguments[0];
      this.$store.state.peopleNum = this.getPeopleNum;
      this.$store.state.killerNum = arguments[0] - this.getPeopleNum;
    }
  }
}
</script>
